<template>
  <a-modal
    v-model:visible="modalVisible"
    :width="1000"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 选择关联条码</template>
    <div class="content"
      ><div class="table-item">
        <a-table
          :data="getTableData"
          :pagination="false"
          :row-selection="rowSelection"
          v-model:selectedKeys="selectedKeys"
          row-key="id"
          @select="onSelect"
          @select-all="onSelectAll"
        >
          <template #columns>
            <a-table-column title="物料包装条码" :width="300" align="center">
              <template #cell="{ record }"
                ><a-space direction="vertical" fill
                  ><div
                    style="display: flex; justify-content: space-between"
                    v-for="item in record.barcodes"
                    :key="item.id"
                  >
                    <div
                      ><a-checkbox
                        @change="checkboxCode(item)"
                        v-model="item.isState"
                        >{{ item.content }}</a-checkbox
                      ></div
                    >
                    <div>{{ item.amount }}</div>
                  </div>
                </a-space></template
              >
            </a-table-column>
            <a-table-column
              title="货架编号"
              :width="100"
              data-index="number"
              align="center"
            />
            <a-table-column
              title="货架名称"
              :width="100"
              data-index="name"
              align="center"
            />
            <a-table-column
              title="订单数量"
              :width="100"
              data-index="amount"
              align="center"
            />
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import { getBarcode, getProductAndBarcode } from '@/api/barcode';
  import { cloneDeep } from 'lodash';
  import Message from '@arco-design/web-vue/es/message';

  const rowSelection = {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  };
  const selectedKeys = ref([]);

  const props = withDefaults(
    defineProps<{
      orderNumber: string;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'selectQrcodeEmit']);
  const getRoleTree = ref<any>([]);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const getTableData = ref();

  const getData = async () => {
    try {
      const res = await getProductAndBarcode({
        orderNumber: props.orderNumber,
        state: 1,
      });
      res.forEach((item) => {
        item.barcodes.forEach((ele) => {
          ele.isState = false;
        });
      });
      getTableData.value = res;
    } catch (err: unknown) {
      console.log(err);
    }
  };

  let form = ref<any>({});

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  const selectedList = ref([]);
  const onSelect = (rowKeys: any, rowKey: any, record: any) => {
    const index = selectedList.value.findIndex((item: any) => {
      return item.id === rowKey;
    });
    if (index === -1) {
      selectedList.value.push(record);
    } else {
      selectedList.value.splice(index, 1);
    }
  };

  // 全选按钮
  const onSelectAll = (checked: boolean) => {
    if (checked) {
      selectedList.value = cloneDeep(getTableData.value);
    } else {
      selectedList.value = [];
    }
  };

  // 确定
  const handleOk = async () => {
    if (!selectedList.value.length) {
      Message.error('请选择相关条码');
      return;
    }
    emit('selectQrcodeEmit', selectedList.value);
    modalVisible.value = false;
  };

  watchEffect(() => {
    if (modalVisible.value) {
      getData();
    }
  });

  const checkboxCode = (val) => {
    // eslint-disable-next-line no-unused-expressions
    val.isState ? !val.isState : val.isState;
  };
</script>

<style scoped lang="less">
  .content {
    display: flex;
    .tree-item {
      width: 25%;
    }
    .table-item {
      margin-left: 20px;
      width: 100%;
    }
  }
</style>
